<template>
  <div class="edit-main">
    <left v-if="currentPage"></left>
    <div class="edit-zone">
      <div class="edit-page-editor">
        <div class="edit-component-con" @click.stop="onHiddenPop">
          <div class="standard-line"></div>
          <middle v-if="currentPage"></middle>
          <shortcut-key></shortcut-key>
          <div v-if="siteStatus.isCopySite" class="copy-site-data-con">
            <el-input type="textarea" placeholder="请输入站点数据" v-model="copySiteData_" @change="onSetSiteData"></el-input>
          </div>
        </div>
        <right></right>
      </div>
      <right-timeline></right-timeline>
    </div>
  </div>
</template>

<script setup lang="ts">
import Middle from '@/views/child/middle.vue'
import Right from '@/views/child/right.vue'
import Left from '@/views/child/left.vue'
import ShortcutKey from '@/views/child/shortcut-key.vue'
import RightTimeline from '@/views/right/right-timeline.vue'

import { useRoute } from 'vue-router'
import { useWebSiteStore } from '@/store/web/site'
import { useWebMediaStore } from '@/store/web/media'
import { useWebComponentStore } from '@/store/web/component'
import { useWebPageStore } from '@/store/web/page'

const copySiteData_ = ref('')
const useWebSite = useWebSiteStore()
const useWebPage = useWebPageStore()
const useWebMedia = useWebMediaStore()
const useWebComponent = useWebComponentStore()

const siteStatus = computed(() => {
  return useWebSite.siteStatus
})
const currentPage = computed(() => {
  return useWebPage.currentPage
})

const initComp = () => {
  const route = useRoute()
  useWebSite.getSiteData(Number(route.params.id))
}
const onHiddenPop = () => {
  useWebMedia.hiddenMediaPop()
  useWebComponent.setRightMenuStatus({ isVisible:false, left:0, top:'-1000px' })
}
const onSetSiteData = () => {
  const copySiteData = JSON.parse(copySiteData_.value)
  copySiteData.id = useWebSite.id
  useWebSite.setLocalData(copySiteData)
}
initComp()

</script>

<style lang="scss">
@import '@/assets/scss/edit-mobile.scss';
</style>
